<template>
    <div class="container">
        <div class="ms-login">
            <div class="login-avatar">
                <el-avatar
                    :size="75"
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
            </div>
            <div class="login-form">
                <el-form
                    ref="login"
                    :model="login"
                    :rules="rules">
                    <el-form-item prop="username">
                        <el-input
                            v-model="login.username"
                            placeholder="账号名/邮箱"
                            prefix-icon="el-icon-user">
                        </el-input>
                    </el-form-item>
                    <div>
                        <el-form-item prop="password">
                            <el-input
                                v-model="login.password"
                                placeholder="密码"
                                prefix-icon="el-icon-lock"
                                show-password
                                type="password"
                                @keyup.enter="submitForm()">
                            </el-input>
                            <br>
                            <div class="register-a">
                                <router-link :to="{name:'Register'}">
                                    <a>注册</a>
                                </router-link>
                            </div>
                            <div class="forget-a">
                                <router-link :to="{path: '/forget'}">
                                    <a>忘记密码?</a>
                                </router-link>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
            <!-- 笔记本上的字 -->
            <div class="login-btn">
                <el-button type="primary" @click="submitForm">登录</el-button>
            </div>
        </div>
        <div id="7w9-5h">
            <div class="lib-comp-text" style="overflow: hidden; opacity: 0.63;">
                <div
                    style="font-size: 52px; font-family: KaiTi_GB2312, KaiTi, STKaiti; text-align: left; color: rgb(0, 0, 0); white-space: pre-wrap; letter-spacing: 0px; word-break: break-word; line-height: 134px; transform-origin: left top; transform: scale(0.5); transition: unset; position: absolute; top: 0; left: 0; width: 398px; min-width: 398px;">
                    <span>“笔迹即脑迹”</span>
                    <div><br></div>
                </div>
            </div>
        </div>
        <div id="7w9-5i">
            <div class="lib-comp-text" style="overflow: hidden; opacity: 0.63;">
                <div
                    style="font-size: 52px; font-family: KaiTi_GB2312, KaiTi, STKaiti,serif; text-align: left; color: rgb(0, 0, 0); white-space: pre-wrap; letter-spacing: 0px; word-break: break-word; line-height: 134px; transform-origin: left top; transform: scale(0.5); transition: unset; position: absolute; top: 0; left: 0; width: 494px; min-width: 494px;">
                    <div>探寻笔迹中的性格<br></div>
                </div>
            </div>
        </div>
        <!--系统名称-->
        <div id="system-div" class="system-name">
            <div class="system-name-text"><span>笔 迹 性 格</span></div>
            <div class="system-name-text"><span>分 析 系 统</span></div>
        </div>
    </div>
</template>


<script>
import Common from "@/api/common";

function setCookie(name, value, seconds) {
    seconds = seconds || 0;   //seconds有值就直接赋值，没有为0，这个根php不一样。
    let expires = "";
    if (seconds !== 0 ) {      //设置cookie生存时间
        let date = new Date();
        date.setTime(date.getTime()+(seconds*1000));
        expires = "; expires="+date.toGMTString();
    }
    document.cookie = name+"="+escape(value)+expires+"; path=/";   //转码并赋值
}

export default {
    data() {
        return {
            login: {
                username: "",
                password: "",
            },
            user: {
                account: null,
                email: null,
                password: null,
            },
            rules: {
                username: [
                    {required: true, message: "请输入用户名", trigger: "blur"},
                ],
                password: [
                    {required: true, message: "请输入密码", trigger: "blur"},
                ]
            }
        }
    },
    created() {

    },
    methods: {
        init() {

        },
        submitForm() {
            // 判断是邮箱还是账户名
            console.log(this.login)
            console.log(this.login.username.search("@") !== -1)
            if (this.login.username.search("@") !== -1) {
                this.user.email = this.login.username
            } else {
                this.user.account = this.login.username
            }
            this.user.password = this.login.password
            Common.userLogin(this.user).then(response => {
                console.log("登录成功")
                console.log(response.data.item);
                localStorage.setItem("SESSION_KEY_USER", JSON.stringify(response.data.item))
                // user 为一个对象
                let user = JSON.parse(localStorage.getItem("SESSION_KEY_USER"));

                // 对usertype进行判断
                if(user.usertype == 0) {
                  this.$router.push({name:'UserIndex'})
                } else if (user.usertype == 1) {
                  this.$router.push({name: 'CustomerShow'})
                }

            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '用户名或密码错误'
                })
            })
        },

    },

}
</script>

<style scoped>

/*正常的未被访问过的链接*/
a:link {
    color: #01d4f0;
}

/*已经访问过的链接*/
a:visited {
    text-decoration: none;
}

/*鼠标划过(停留)的链接*/
a:hover {
    color: rgb(64, 128, 255);
}

/* 正在点击的链接，鼠标在元素上按下还没有松开*/
a:active {
    text-decoration: none;
}

.container {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(../../assets/img/login-bg.png);
    background-size: 100%;
}

.ms-login {
    position: absolute;
    left: 12%;
    top: 21%;
    width: 370px;
    height: 520px;
    border-radius: 28px;
    box-shadow: 4px 4px 15px #6d6a6a;
    background: rgb(250, 250, 250);
    /*overflow: hidden;*/
}

.ms-content {
    padding: 30px 30px;
}

.login-btn {
    text-align: center;
}

.login-btn button {
    width: 128px;
    height: 42px;
    margin-top: 25px;
}

.login-avatar {
    height: 200px;
    /*水平垂直居中*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-form {
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-form {
    /*取消浮动，否者输入框会变为行内元素*/
    /*display: flex;*/
    justify-content: center;
    align-items: center;
}

.el-input {
    width: 280px;
}

/*系统名*/
.system-name {
    position: absolute;
    width: 230px;
    height: 160px;
    left: 54%;
    top: 7%;
    border-width: 1px;
    border-color: rgb(0, 151, 136);
    /*如果使用opacity: 设置透明度，那么子元素也会透明，即使子元素设置了不透明也依旧透明，可以设置背景色透明*/
    /*opacity: 1;*/
    background: rgba(245, 235, 235, 0.11);
    border-style: solid;
    border-radius: 44px;
}

.system-name-text {
    opacity: 1;
    text-align: center;
    line-height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Microsoft YaHei", 微软雅黑, -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, sans-serif;
    color: rgb(255, 255, 255);
    font-size: 40px;
}

/* 字*/
#\37 w9-5i {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
    font-size: 13px;
    color: inherit;
    -webkit-box-direction: normal;
    fill: rgb(255, 255, 255);
    position: absolute;
    box-sizing: border-box;
    min-width: 1px;
    min-height: 1px;
    cursor: inherit;
    pointer-events: auto;
    user-select: text;
    transform: translate(555px, 437px) rotate(356deg) scale(0.8, 0.8);
    width: 247px;
    height: 56px;
    transition: unset;
    z-index: 0;
}

#\37 w9-5h {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", Helvetica, Tahoma, Arial, "Microsoft YaHei", 微软雅黑, sans-serif;
    font-size: 13px;
    color: inherit;
    -webkit-box-direction: normal;
    fill: rgb(255, 255, 255);
    position: absolute;
    box-sizing: border-box;
    min-width: 1px;
    min-height: 1px;
    cursor: inherit;
    pointer-events: auto;
    user-select: none;
    transform: translate(556px, 387px) rotate(358deg) scale(0.8, 0.8);
    width: 199px;
    height: 56px;
    transition: unset;
    z-index: 0;
}

.register-a {
    display: inline;
    font-size: 13px;
}

.forget-a {
    position: absolute;
    right: 0;
    text-align: right;
    display: inline;
    font-size: 13px;
}
</style>